<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style>
			div{
				/* div有宽没高：设置高宽 */
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/* 盒/框模型：页面任何元素存在于盒模型中
				        组成：外边距+边框+内边距+内容
					  外边距：margin属性  与border属性方向用法一致
					    语法：属性值1个，代表4个方向，顺时针：上 右 下 左
						      属性值2个，代表4个方向，顺时针: 上下 左右
							                         自适应居中：  0   auto
							  属性值3个，代表4个方向，顺时针：上 右左 下
				      外边距-方向属性：
					   margin-left：数值px;
					   margin-right:数值px;
					   margin-top:数值px;
					   margin-bottom:数值px;						 
				 */
				margin: 100px;/*上 右 下 左*/
				margin: 10px 100px;/* 上下 左右 */
				margin: 10px 20px 100px; /* 上  右左 下*/
				margin: 10px 20px 30px 100px;/*说 右 下 左 */
				/* 自适应居中 */
				margin: 0 auto;
				/* 元素向下移动100个像素 */
				margin-top: 100px;
				/* 内边距：padding属性与margin属性使用方法类似 
				     特点:边框与内容之间距离，撑开适用于精灵图
					 语法：属性值1个，代表4个方向，顺时针：上 右 下 左
					       属性值2个，代表4个方向，顺时针: 上下 左右
					 	   属性值3个，代表4个方向，顺时针：上 右左 下
						   属性值4个，代表4个方向，顺时针：上 右 下 左
				    内边距-方向与外边距-方向使用方法使用方法一致
				*/
				padding: 50px;
				padding: 50px 100px;/* 使用率：精灵图 */
			    padding: 50px 100px 200px;
				padding: 50px 100px 200px 300px;			   
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>